<template>
  <div>
    <div class="content">
      <header>
        <img src="" alt="">
      </header>
      <div class="swiper">
        <mt-swipe :auto="4000">
          <mt-swipe-item v-for="item in carouselList"><img :src="item.carouselImg" alt=""></mt-swipe-item>
        </mt-swipe>
      </div>
      <div class="sourceDynamics">
        <router-link :to="{ path: 'supplier', query: { uId: item.uId }}" class="dynamic" v-for="item in supplierDynamicsList">
          <h3>{{item.supplierTitle}}</h3>
          <p>{{item.supplierWarehouse}}
            <span>配货率：{{item.supplierRate}}%</span>
          </p>
          <p class="timeCount">{{item.createDate|getDateDiff}}
            <span>{{item.goodsNum}}款</span>
          </p>
        </router-link>
      </div>
    </div>
    <footertab></footertab>
  </div>
</template>
<script>
import footertab from '@/components/footer/footer'
import {
  getCarouselList,
  getAppSupplierDynamics
} from '@/api/shop'
export default {
  data() {
    return {
      carouselList: [],
      supplierDynamicsList: []
    }
  },
  watch: {},
  components: {
    footertab
  },
  computed: {},
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getCarouselList().then(res => {
        this.carouselList = res.data.carouselList
      })
      getAppSupplierDynamics().then(res => {
        this.supplierDynamicsList = res.data.supplierDynamicsList
      })
    }
  }
}

</script>
<style lang="scss" scoped>
@import '~assets/common/css/mixin.scss';
.content {
  padding-bottom: 1.35rem;
  min-height: 100vh;
}

header {
  height: 40px;
  background-color: #262626;
}

.swiper {
  height: 251px;
  img{
    width: 100%;
    height: auto;
  }
}

.sourceDynamics {
  padding: 0 15px 15px;
  .dynamic {
    background-color: #fff;
    display: inline-block;
    width: 100%;
    padding: 20px 15px 10px;
    margin-top: 10px;
    h3 {
      font-size: 16px;
      color: #000;
      font-weight: 700;
    }
    p {
      color: #000;
      margin-top: 15px;
      span {
        color: #F5A623;
        float: right;
      }
    }
    .timeCount {
      color: #bbb;
      span {
        color: #bbb;
      }
    }
  }
}
</style>
